<script setup lang="ts">
import { ref } from "vue";
import lightOn from "./assets/light_on.svg";
import lightOff from "./assets/light_off.svg";

const isON = ref(false);
const changeLight = () => {
  isON.value = !isON.value;
};
</script>

<template>
  <!-- tyle动态绑定样式，传入样式对象 -->
  <button
    @click="changeLight()"
    :style="{ backgroundColor: isON ? 'red' : '' }"
  >
    点击切换
  </button>
  <!-- 三元表达式：动态绑定类 -->
  <p :class="isON ? 'isActive' : ''">{{ isON }}</p>
  <!-- 象的写法绑定类名：{类名：条件}，如果条件为真就添加类型 -->
  <p :class="{ isActive: isON }">{{ isON }}</p>
  <!-- 三元表达式：动态绑定资源 -->
  <img :src="isON ? lightOn : lightOff" alt="" />
</template>

<style scoped>
.isActive {
  background-color: aqua;
}
</style>
